
"use strict";

let getSmallLightCubeVertexPosData = function (posX,posY,posZ) {
    return new Float32Array([   // Coordinates
        1.0 * 7.0000 + posX, 1.0 * 7.0000 + posY, 1.0 * 7.0000 + posZ, -1.0 * 7.0000 + posX, 1.0 * 7.0000 + posY, 1.0 * 7.0000 + posZ, -1.0 * 7.0000 + posX, -1.0 * 7.0000 + posY, 1.0 * 7.0000 + posZ, 1.0 * 7.0000 + posX, -1.0 * 7.0000 + posY, 1.0 * 7.0000 + posZ, // v0-v1-v2-v3 front
        1.0 * 7.0000 + posX, 1.0 * 7.0000 + posY, 1.0 * 7.0000 + posZ, 1.0 * 7.0000 + posX, -1.0 * 7.0000 + posY, 1.0 * 7.0000 + posZ, 1.0 * 7.0000 + posX, -1.0 * 7.0000 + posY, -1.0 * 7.0000 + posZ, 1.0 * 7.0000 + posX, 1.0 * 7.0000 + posY, -1.0 * 7.0000 + posZ, // v0-v3-v4-v5 right
        1.0 * 7.0000 + posX, 1.0 * 7.0000 + posY, 1.0 * 7.0000 + posZ, 1.0 * 7.0000 + posX, 1.0 * 7.0000 + posY, -1.0 * 7.0000 + posZ, -1.0 * 7.0000 + posX, 1.0 * 7.0000 + posY, -1.0 * 7.0000 + posZ, -1.0 * 7.0000 + posX, 1.0 * 7.0000 + posY, 1.0 * 7.0000 + posZ, // v0-v5-v6-v1 up
        -1.0 * 7.0000 + posX, 1.0 * 7.0000 + posY, 1.0 * 7.0000 + posZ, -1.0 * 7.0000 + posX, 1.0 * 7.0000 + posY, -1.0 * 7.0000 + posZ, -1.0 * 7.0000 + posX, -1.0 * 7.0000 + posY, -1.0 * 7.0000 + posZ, -1.0 * 7.0000 + posX, -1.0 * 7.0000 + posY, 1.0 * 7.0000 + posZ, // v1-v6-v7-v2 left
        -1.0 * 7.0000 + posX, -1.0 * 7.0000 + posY, -1.0 * 7.0000 + posZ, 1.0 * 7.0000 + posX, -1.0 * 7.0000 + posY, -1.0 * 7.0000 + posZ, 1.0 * 7.0000 + posX, -1.0 * 7.0000 + posY, 1.0 * 7.0000 + posZ, -1.0 * 7.0000 + posX, -1.0 * 7.0000 + posY, 1.0 * 7.0000 + posZ, // v7-v4-v3-v2 down
        1.0 * 7.0000 + posX, -1.0 * 7.0000 + posY, -1.0 * 7.0000 + posZ, -1.0 * 7.0000 + posX, -1.0 * 7.0000 + posY, -1.0 * 7.0000 + posZ, -1.0 * 7.0000 + posX, 1.0 * 7.0000 + posY, -1.0 * 7.0000 + posZ, 1.0 * 7.0000 + posX, 1.0 * 7.0000 + posY, -1.0 * 7.0000 + posZ  // v4-v7-v6-v5 back
    ]);
}

let getBigCubeVertexPosData = function () {
    return new Float32Array([   // Coordinates
        1.0 * 100.000 + 1, 1.0 * 100.000 + 1, 1.0 * 100.000 + 1, -1.0 * 100.000 + 1, 1.0 * 100.000 + 1, 1.0 * 100.000 + 1, -1.0 * 100.000 + 1, -1.0 * 100.000 + 1, 1.0 * 100.000 + 1, 1.0 * 100.000 + 1, -1.0 * 100.000 + 1, 1.0 * 100.000 + 1, // v0-v1-v2-v3 front
        1.0 * 100.000 + 1, 1.0 * 100.000 + 1, 1.0 * 100.000 + 1, 1.0 * 100.000 + 1, -1.0 * 100.000 + 1, 1.0 * 100.000 + 1, 1.0 * 100.000 + 1, -1.0 * 100.000 + 1, -1.0 * 100.000 + 1, 1.0 * 100.000 + 1, 1.0 * 100.000 + 1, -1.0 * 100.000 + 1, // v0-v3-v4-v5 right
        1.0 * 100.000 + 1, 1.0 * 100.000 + 1, 1.0 * 100.000 + 1, 1.0 * 100.000 + 1, 1.0 * 100.000 + 1, -1.0 * 100.000 + 1, -1.0 * 100.000 + 1, 1.0 * 100.000 + 1, -1.0 * 100.000 + 1, -1.0 * 100.000 + 1, 1.0 * 100.000 + 1, 1.0 * 100.000 + 1, // v0-v5-v6-v1 up
        -1.0 * 100.000 + 1, 1.0 * 100.000 + 1, 1.0 * 100.000 + 1, -1.0 * 100.000 + 1, 1.0 * 100.000 + 1, -1.0 * 100.000 + 1, -1.0 * 100.000 + 1, -1.0 * 100.000 + 1, -1.0 * 100.000 + 1, -1.0 * 100.000 + 1, -1.0 * 100.000 + 1, 1.0 * 100.000 + 1, // v1-v6-v7-v2 left
        -1.0 * 100.000 + 1, -1.0 * 100.000 + 1, -1.0 * 100.000 + 1, 1.0 * 100.000 + 1, -1.0 * 100.000 + 1, -1.0 * 100.000 + 1, 1.0 * 100.000 + 1, -1.0 * 100.000 + 1, 1.0 * 100.000 + 1, -1.0 * 100.000 + 1, -1.0 * 100.000 + 1, 1.0 * 100.000 + 1, // v7-v4-v3-v2 down
        1.0 * 100.000 + 1, -1.0 * 100.000 + 1, -1.0 * 100.000 + 1, -1.0 * 100.000 + 1, -1.0 * 100.000 + 1, -1.0 * 100.000 + 1, -1.0 * 100.000 + 1, 1.0 * 100.000 + 1, -1.0 * 100.000 + 1, 1.0 * 100.000 + 1, 1.0 * 100.000 + 1, -1.0 * 100.000 + 1  // v4-v7-v6-v5 back
    ]);
}

let getCubeColorData = function () {
    return new Float32Array([    // Colors
        1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v1-v2-v3 front
        1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v3-v4-v5 right
        1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v5-v6-v1 up
        1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v1-v6-v7-v2 left
        1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v7-v4-v3-v2 down
        1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0　    // v4-v7-v6-v5 back
    ]);
}

let getCubeNormalData = function () {
    return new Float32Array([    // Normal
        0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,  // v0-v1-v2-v3 front
        1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,  // v0-v3-v4-v5 right
        0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,  // v0-v5-v6-v1 up
        -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,  // v1-v6-v7-v2 left
        0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,  // v7-v4-v3-v2 down
        0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0   // v4-v7-v6-v5 back
    ]);
}

let getCubeIndiceData = function () {
    return new Uint8Array([
        0, 1, 2, 0, 2, 3,    // front
        4, 5, 6, 4, 6, 7,    // right
        8, 9, 10, 8, 10, 11,    // up
        12, 13, 14, 12, 14, 15,    // left
        16, 17, 18, 16, 18, 19,    // down
        20, 21, 22, 20, 22, 23     // back
    ]);
}
let getCubeTextureCoordData = function () {
    return new Float32Array([
        0, 1,
        1, 1,
        0, 0,
        1, 1,
        0, 0,
        1, 0,
        1, 1,
        1, 0,
        0, 1,
        0, 0,
        1, 1,
        1, 0,
        0, 1,
        0, 0,
        1, 1,
        1, 0,
        0, 1,
        0, 0,
        1, 1,
        1, 0,
        0, 1,
        0, 0,
        1, 1,
        1, 0,
        0, 1,
        0, 0,
        1, 1,
        1, 0,]);
}

let getFloorVertexPosData = function () {
    // |------------>
    // |
    // |
    // |
    return new Float32Array([
        -1 * 1000 - 500, -0.1 * 1000, -1 * 1000 - 500,
        1 * 1000 - 500, -0.1 * 1000, -1 * 1000 - 500,
        -1 * 1000 - 500, -0.1 * 1000, 1 * 1000 - 500,
        1 * 1000 - 500, -0.1 * 1000, -1 * 1000 - 500,
        -1 * 1000 - 500, -0.1 * 1000, 1 * 1000 - 500,
        1 * 1000 - 500, -0.1 * 1000, 1 * 1000 - 500]);
}

let getFloorNormalData = function () {
    return new Float32Array([    // Normal
        0.0, 1.0, 0.0,
        0.0, 1.0, 0.0,
        0.0, 1.0, 0.0,
        0.0, 1.0, 0.0,
        0.0, 1.0, 0.0,
        0.0, 1.0, 0.0
    ]);
}
let getLightPosData = function () {
    return [lightPosX, lightPosY, lightPosZ];
}
let getLightDirectData = function () {
    return [lightDirectPosX, -lightPosY, lightDirectPosZ];
}
let getCamera = function () {
    return [cameraX, cameraY, cameraZ]
}

let cameraX = 1;
let cameraY = 600;
let cameraZ = 300;

let lightPosX = 0;
let lightPosY = 400;
let lightPosZ = 0;
let startTime = Date.now();
let bigCubeRotation = 0;

let lightDirectPosX = 0;
let lightDirectPosZ = 0;
let lightLimitInData = 0.89;
let lightLimitOutData = 0.85;

let canvas = document.querySelector("#canvas");
let gl = canvas.getContext("webgl");

let bigCubeColors = getCubeColorData();
let bigCubeVertexPos = getBigCubeVertexPosData();
let bigCubeNormals = getCubeNormalData();
let bigCubeIndices = getCubeIndiceData();
let textureCoordData = getCubeTextureCoordData();

let shaderProgramOne;
let imgIsLoaded = false;

let smallLightCubeVertColorData = getCubeColorData();
let smallLightCubeIndices = getCubeIndiceData()
let shaderProgramTwo;
let shaderProgramThree;

let floorVertexPos = getFloorVertexPosData();
let floorNormals = getFloorNormalData();
let imgFile = null;
// let textureCoordData = getCubeTextureCoordData();

let usingShaderProgram;
function initOpenGL() {
    if (!gl) {
        return;
    }

    webglUtils.resizeCanvasToDisplaySize(gl.canvas);
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    gl.clear(gl.COLOR_BUFFER_BIT);

    shaderProgramOne = webglUtils.createProgramFromScripts(gl, ["vertex-shader-2d", "fragment-shader-2d"]);
    shaderProgramTwo = webglUtils.createProgramFromScripts(gl, ["vertex-shader-2d_new", "fragment-shader-2d_new"]);
    shaderProgramThree = webglUtils.createProgramFromScripts(gl, ["vertex-shader-2d_3", "fragment-shader-2d_3"]);
}
initOpenGL()

let setUsingShaderProgram = function (program) {
    gl.useProgram(program);
    usingShaderProgram = program;
}
let setAttribArrayData = function (attrName, data, count) {
    let attributeLocation = gl.getAttribLocation(usingShaderProgram, attrName);
    let positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(
        gl.ARRAY_BUFFER,
        data,
        gl.STATIC_DRAW);
    gl.enableVertexAttribArray(attributeLocation);
    gl.vertexAttribPointer(
        attributeLocation, count, gl.FLOAT, false, 0, 0);
}
let setIndicesData = function (data) {
    let indicesBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
    gl.bufferData(
        gl.ELEMENT_ARRAY_BUFFER,
        data,
        gl.STATIC_DRAW);
}
let setMvpMatData = function (name, angle) {
    let matrixLocat2 = gl.getUniformLocation(usingShaderProgram, name);
    let projectionMatrix = m4.perspective((Math.PI * 90 / 180), 1, 100, 1000);

    let cameraMatrix = m4.lookAt(new Float32Array(getCamera()), new Float32Array([0, 0, 0]), new Float32Array([0, 1, 0]));
    // Make a view matrix from the camera matrix.
    let viewMatrix = m4.inverse(cameraMatrix);
    // Compute a view projection matrix
    let viewProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);
    let worldMatrix = m4.yRotation(0);
    // m4.zRotate(0.5,worldMatrix);
    let worldViewProjectionMatrix2 = m4.multiply(viewProjectionMatrix, worldMatrix);
    worldViewProjectionMatrix2 = m4.scale(worldViewProjectionMatrix2, 1, 1, 1);
    worldViewProjectionMatrix2 = m4.yRotate(worldViewProjectionMatrix2, angle);
    gl.uniformMatrix4fv(matrixLocat2, false, worldViewProjectionMatrix2);
}

function drawUnderGround() {
    let setLightDirectData = function () {
        let u_lightDirection = gl.getUniformLocation(usingShaderProgram, "u_lightDirection");
        gl.uniform3fv(u_lightDirection, getLightDirectData());
    }

    let setLightLimitData = function () {
        let u_limitIn = gl.getUniformLocation(usingShaderProgram, "u_limitIn");
        gl.uniform1f(u_limitIn, lightLimitInData);
        let u_limitOut = gl.getUniformLocation(usingShaderProgram, "u_limitOut");
        gl.uniform1f(u_limitOut, lightLimitOutData);
    }

    let setLightPosData = function () {
        let u_lightPos = gl.getUniformLocation(usingShaderProgram, "u_lightPos");
        gl.uniform3fv(u_lightPos, getLightPosData());
    }

    let setAmbientLightData = function () {
        let u_amibLigh = gl.getUniformLocation(usingShaderProgram, "u_amibLigh");
        gl.uniform4f(u_amibLigh, 0.7, 0.7, 0.7, 1.0);
    }

    let setShineData = function () {
        let u_shine = gl.getUniformLocation(usingShaderProgram, "u_shine");
        gl.uniform1f(u_shine, 90.0);
    }

    let setCameraPosData = function () {
        let u_cameraPos = gl.getUniformLocation(usingShaderProgram, "u_cameraPos");
        gl.uniform3fv(u_cameraPos, getCamera());
    }

    let setTextureData = function () {
        let sampler = gl.getUniformLocation(usingShaderProgram, "u_sampler");
        let texture = gl.createTexture();
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, texture);
        // let's assume all images are not a power of 2
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, imgFile);
        gl.uniform1i(sampler, 0);
    }

    let setAllDrawData = function () {
        setAttribArrayData("a_position", floorVertexPos, 3);

        setAttribArrayData("a_norm", floorNormals, 3);

        setAttribArrayData("a_texCoor", textureCoordData, 2);
        setLightDirectData();
        setLightLimitData();
        setLightPosData();
        setAmbientLightData();
        setShineData();
        setCameraPosData();
        setMvpMatData("u_mvpmat", bigCubeRotation);
        setTextureData();
    }

    // Draw the scene.
    let drawScene2 = function () {
        var primitiveType = gl.TRIANGLES;
        var offset = 0;
        var count = 6;
        gl.drawArrays(primitiveType, offset, count);
    }
    let callDrawFunc = function () {
        setUsingShaderProgram(shaderProgramOne);
        setAllDrawData();
        drawScene2();
    }
    callDrawFunc();
}

function drawSmallLightCube() {

    let setAllData = function () {
        setAttribArrayData("a_position2", getSmallLightCubeVertexPosData(lightPosX,lightPosY,lightPosZ), 3);
        setAttribArrayData("a_color2", smallLightCubeVertColorData, 3);
        setIndicesData(smallLightCubeIndices);
        setMvpMatData("u_mvpmat2", bigCubeRotation);
    }
    // Draw the scene.
    let drawScene2 = function () {
        let primitiveType = gl.TRIANGLES;
        let offset = 0;
        let count = 36;
        gl.enable(gl.DEPTH_TEST)
        gl.drawElements(primitiveType, count, gl.UNSIGNED_BYTE, offset);
    }
    let callDrawFunc = function () {
        setUsingShaderProgram(shaderProgramTwo);
        setAllData();
        drawScene2();
    }
    callDrawFunc();
}

function drawBigCube() {
    let setLightDirectData = function () {
        let u_lightDirection = gl.getUniformLocation(usingShaderProgram, "u_lightDirection");
        gl.uniform3fv(u_lightDirection, getLightDirectData());
    }

    let setLightLimitData = function () {
        let u_limitIn = gl.getUniformLocation(usingShaderProgram, "u_limitIn");
        gl.uniform1f(u_limitIn, lightLimitInData);
        let u_limitOut = gl.getUniformLocation(usingShaderProgram, "u_limitOut");
        gl.uniform1f(u_limitOut, lightLimitOutData);
    }

    let setLightPosData = function () {
        let u_lightPos = gl.getUniformLocation(usingShaderProgram, "u_lightPos");
        gl.uniform3fv(u_lightPos, getLightPosData());
    }

    let setAmbientLightData = function () {
        let u_amibLigh = gl.getUniformLocation(usingShaderProgram, "u_amibLigh");
        gl.uniform4f(u_amibLigh, 0.7, 0.7, 0.7, 1.0);
    }

    let setShineData = function () {
        let u_shine = gl.getUniformLocation(usingShaderProgram, "u_shine");
        gl.uniform1f(u_shine, 90.0);
    }

    let setNormalMatData = function () {
        let u_normMat = gl.getUniformLocation(usingShaderProgram, "u_normMat");
        let norMat = m4.yRotate(90);
        norMat = m4.inverse(norMat);
        norMat = m4.transpose(norMat)
        gl.uniformMatrix4fv(u_normMat, false, norMat)
    }

    let setModelMatData = function () {
        let u_modelMat = gl.getUniformLocation(usingShaderProgram, "u_modelMat");
        let modMat = m4.translation(0, 0, 0);
        // modMat = m4.inverse(modMat);
        // modMat = m4.transpose(modMat)
        gl.uniformMatrix4fv(u_modelMat, false, modMat)
    }

    let setCameraPosData = function () {
        let u_cameraPos = gl.getUniformLocation(usingShaderProgram, "u_cameraPos");
        gl.uniform3fv(u_cameraPos, getCamera());
    }

    let setTextureData = function () {
        let sampler = gl.getUniformLocation(usingShaderProgram, "u_sampler");
        let texture = gl.createTexture();
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, texture);
        // let's assume all images are not a power of 2
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);
        gl.uniform1i(sampler, 0);
    }

    let setAllDrawData = function () {
        setAttribArrayData("a_position", bigCubeVertexPos, 3);
        setAttribArrayData("a_color", bigCubeColors, 3);
        setAttribArrayData("a_norm", bigCubeNormals, 3);
        setIndicesData(bigCubeIndices);
        setAttribArrayData("a_texCoor", textureCoordData, 2);
        setLightDirectData();
        setLightLimitData();
        setLightPosData();
        setAmbientLightData();
        setShineData();
        setNormalMatData();
        setModelMatData();
        setCameraPosData();
        setMvpMatData("u_mvpmat", bigCubeRotation);
        setTextureData();
    }

    // Draw the scene.
    let drawScene = function () {
        let primitiveType = gl.TRIANGLES;
        let offset = 0;
        let count = 36;
        // gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
        gl.enable(gl.DEPTH_TEST)
        gl.drawElements(primitiveType, count, gl.UNSIGNED_BYTE, offset);
    }

    let getAngle = function () {
        return (Date.now() - startTime) / 1000;
    }

    let rotate = function () {
        bigCubeRotation = getAngle();
    }

    let callDrawFunc = function () {
        setUsingShaderProgram(shaderProgramOne);
        setAllDrawData();
        // rotate();
        drawScene();
        drawSmallLightCube();
        drawUnderGround();
        requestAnimationFrame(callDrawFunc);
    }

    imgFile = new Image();
    imgFile.addEventListener('load', function () {
        imgIsLoaded = true;
        // callDrawFunc();
    })
    imgFile.src = "resources/leaves.jpg"

    let img = new Image();
    img.addEventListener('load', function () {
        imgIsLoaded = true;
        callDrawFunc();
    })
    img.src = "resources/keyboard.jpg"

}


drawBigCube();

























let updateLightPosX = function (evt, ui) {
    lightPosX = ui.value;
}
let updateLightPosY = function (evt, ui) {
    lightPosY = ui.value;
}
let updateLightPosZ = function (evt, ui) {
    lightPosZ = ui.value;
}
let updateLimitIn = function (evt, ui) {
    lightLimitInData = ui.value;
}
let updateLimitOut = function (evt, ui) {
    lightLimitOutData = ui.value;
}
let updateLightDirectX = function (evt, ui) {
    lightDirectPosX = ui.value;
}
let updateLightDirectZ = function (evt, ui) {
    lightDirectPosZ = ui.value;
}
let updateCameraX = function (evt, ui) {
    cameraX = ui.value;
}
let updateCameraY = function (evt, ui) {
    cameraY = ui.value;
}
let updateCameraZ = function (evt, ui) {
    cameraZ = ui.value;
}

webglLessonsUI.setupSlider("#lightPosX", { value: lightPosX, slide: updateLightPosX, min: -800, max: 800 });
webglLessonsUI.setupSlider("#lightPosY", { value: lightPosY, slide: updateLightPosY, min: -800, max: 800 });
webglLessonsUI.setupSlider("#lightPosZ", { value: lightPosZ, slide: updateLightPosZ, min: -800, max: 800 });

webglLessonsUI.setupSlider("#lightDirectX", { value: lightDirectPosX, slide: updateLightDirectX, min: -200, max: 200 });
webglLessonsUI.setupSlider("#lightDirectZ", { value: lightDirectPosZ, slide: updateLightDirectZ, min: -200, max: 200 });
webglLessonsUI.setupSlider("#limitIn", { value: lightLimitInData, slide: updateLimitIn, min: 0.8, max: 1.0, precision: 2, step: 0.001});
webglLessonsUI.setupSlider("#limitOut", { value: lightLimitOutData, slide: updateLimitOut, min: 0.4, max: 0.9, precision: 2, step: 0.001});
webglLessonsUI.setupSlider("#cameraX", { value: cameraX, slide: updateCameraX, min: -600, max: 600 });
webglLessonsUI.setupSlider("#cameraY", { value: cameraY, slide: updateCameraY, min: -600, max: 600 });
webglLessonsUI.setupSlider("#cameraZ", { value: cameraZ, slide: updateCameraZ, min: -600, max: 600 });
